<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>波纹</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      background-color: #333;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      height: 100vh;
      margin: 0;
    }

    .container {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      /*换行*/
      width: 450px;
    }

    .circle {
      background-color: white;
      height: 14px;
      width: 14px;
      border-radius: 50%;
      cursor: pointer;
      margin: 8px;
      transform: scale(1);
      transition: transform 0.3s linear;
    }

    .circle.grow {
      transform: scale(2);
    }
  </style>
</head>

<body>

  <h3>点击下方小球</h3>
  <div id="container" class="container"></div>


  <script>
    const container = document.getElementById('container')
    const circleArr = []
    let rows = 15
    let cols = 15

    function growCircles(i, j) {
      if (circleArr[i] && circleArr[i][j]) {
        console.log(circleArr[i][j].classList)
        if (!circleArr[i][j].classList.contains('grow')) { //不包含grow时
          circleArr[i][j].classList.add('grow')
          setTimeout(() => { //让小球上下左右位置的球都变
            growCircles(i-1,j)
            growCircles(i+1,j)
            growCircles(i,j-1)
            growCircles(i,j+1)
          }, 100);

          setTimeout(()=>{
            circleArr[i][j].classList.remove('grow')
          },300)
        }
      }
    }

    for (let i = 0; i < cols; i++) {
      circleArr[i] = []
      for (let j = 0; j < rows; j++) {
        const circle = document.createElement('div')
        // circle.className = 'circle'
        circle.classList.add('circle')
        container.appendChild(circle)
        circleArr[i].push(circle)
      }
    }

    circleArr.forEach((cols, i) => {
      cols.forEach((circle, j) => {
        circle.addEventListener('click', () => {
          growCircles(i, j)
        })
      })
    })
  </script>
</body>

</html>